<template>
		<div class="detail" >
		<span class="iconfont icon-shang" id="top" @click="tophide()"></span>
		<p class="iconfont icon-fanhui" @click="test()">返回</p>
		<ul id="wordCont">
			<h2 id="detailTitle"></h2>
			<li id="detailCont"></li>
		</ul>
	</div>
</template>

<script>
	import footerToggle from "@/md/footerToggle.js"
	import headerToggle from "@/md/headerToggle.js"
	import todaydetail  from "@/json/todaydetail.json"
	import cldetail  from "@/json/cldetail.json"
	import sisterdetail  from "@/json/sisterdetail.json"
	export default{
		data(){
			return{
				todayDetail:[],
				clDetail:[],
				sisterDetail:[]
			}
		},
		mounted(){
			footerToggle.hide();
			headerToggle.hide();
			this.todayDetail = todaydetail;
			this.clDetail = cldetail;
			this.sisterDetail = sisterdetail;
//			 console.log(this.$route.params.classid)
			 const classID = this.$route.params.classid;
			 
			 
        	if(classID == 1573921){
        		document.getElementById("detailTitle").innerHTML = todaydetail.title;
				document.getElementById("detailCont").innerHTML = todaydetail.content;
        	}
        	
        	
        	if(classID == 1573857){
        		document.getElementById("detailTitle").innerHTML = sisterdetail.title;
				document.getElementById("detailCont").innerHTML = sisterdetail.content;
//				console.log(document.getElementsByTagName("img"))

				//设置图片的宽度
				var imgStyle = document.getElementsByTagName("img");
				for(var i = 1; i < imgStyle.length;i++){
					imgStyle[i].style.width = 339 +'px';
				}
        	}
        	
        	
        	if(classID == 1573683){
        		document.getElementById("detailTitle").innerHTML = cldetail.title;
				document.getElementById("detailCont").innerHTML = cldetail.content;
				//设置图片的宽度
				var imgStyle = document.getElementsByTagName("img");
				for(var i = 1; i < imgStyle.length;i++){
					imgStyle[i].style.width = 339 +'px';
				}
        	}
			
			//滚动事件
			document.addEventListener('scroll',function(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 				if(scrollTop>300){ 
					document.getElementById("top").style.display = "block"; 
				}else{
					document.getElementById("top").style.display = "none";
				};
			})
		},
		methods:{
			test(){
				window.history.go(-1);
			},
			tophide(){
				var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; 
				if(scrollTop>300){
					document.body.scrollTop = 0;
					document.documentElement.scrollTop = 0;
				}else{
					document.getElementById("top").style.display = "none";
				}
			}
		},
		components:{
			
		}
	}
</script>

<style scoped lang="scss">
@import "~@/scss/main.scss";
.detail{
	@include rect(100%,100%);
	li{
		@include rect(100%,3rem);
	}
	#detailTitle{
		font-size:24px;
		text-align: center;
	}
	.icon-shang{
		position:fixed;
		display:none;
		right:10px;
		bottom: 0;
		width:40px;
		height:40px;
		font-size:30px;
		background:rgba(96,96,96,.4);
		border-radius: 20px;
		line-height:40px;
		text-align: center;
		color:#fff;
	}
	.icon-fanhui{
		@include rect(100%, 0.5rem);
		background: #1C2635;
		color:#fff;
		line-height: 0.5rem;
		text-indent: 20px;
	}
	#wordCont{
		img{
			width:339px;
			margin:14px;
			}
		@include rect(100%, 100%);
		#detailCont{
			@include rect(100%, auto);
			overflow: hidden;
			text-align:center;
		}
	}
}
</style>